import { useState, useEffect } from 'react';
import { Layout, Menu } from 'antd';
import { Link } from 'react-router-dom';
import img from '../../img/logo.png';
import { createFromIconfontCN } from '@ant-design/icons';

const { Sider } = Layout;
const { SubMenu } = Menu;
const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2928153_a8ynxy9hpn5.js',
});

export default function TabMenu(props) {
  const [collapsed, setCollapsed] = useState(false);
  const onCollapse = (collapsed) => {
    setCollapsed(collapsed);
  };
  return (
    <>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div
          className="logo"
          style={{ textAlign: 'center', margin: '20px auto' }}
        >
          <img src={img} style={{ width: '30px', marginRight: '20px' }}></img>
          <span style={{ color: 'white', fontSize: '20px' }}>赤兔养车</span>
        </div>
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          {props.router.map((item, index) => {
            if (item.children) {
              return (
                <SubMenu
                  key={index}
                  icon={<IconFont type={`icon-${item.icon}`}></IconFont>}
                  title={item.name}
                >
                  {item.children.map((item2) => {
                    return (
                      <Menu.Item
                        icon={<IconFont type={`icon-${item.icon}`}></IconFont>}
                        key={item2.name}
                      >
                        <Link to={item2.path}>{item2.name}</Link>
                      </Menu.Item>
                    );
                  })}
                </SubMenu>
              );
            } else {
              return (
                <Menu.Item
                  key={index}
                  icon={<IconFont type={`icon-${item.icon}`}></IconFont>}
                >
                  <Link to={item.path}>{item.name}</Link>
                </Menu.Item>
              );
            }
          })}
        </Menu>
      </Sider>
    </>
  );
}
